
<template>
  <swiper class="home-swiper" :current="activeIndex" @change="change">
    <swiper-item v-for="(item, index) in tab" :key="index" class="swiper-item">
      
        <list-item :list="listCatchData[index]" :load="load[index]" @loadmore="loadmore" ></list-item>
      
    </swiper-item>
  </swiper>
</template>

<script>
	export default {
		name:"list",
		data() {
			return {
				list: [],
				listCatchData:{},
				load:{},
				pageSize:5
			};
		},
		props:{
			tab:{
				type:Array,
				default() {
					return []
				}
			},
			tabIndex:{
				type: Number,
				default: 0
			},
			activeIndex:{
				type:Number,
				default:0
			}
		},
		methods:{
			loadmore() {
				console.log('lordmore');
				// if(this.load[this.activeIndex].loading === 'noMore') return
				this.page++;
				this.load[this.activeIndex].page++
				this.getList(this.activeIndex)
			},
			change(e) {
				const {current} = e.detail
				// console.log(e);
				console.log(this.tab[current].name);
				// this.getList(current)
				this.$emit('change',current)
				// 当数据不存在或者长度为0,请求数据
				if(!this.listCatchData[current]) {
					this.getList(current)
				}
			},
			getList(current) {
				if(!this.load[current]) {
					this.load[current] = {
						page: 1,
						loading: 'loading'
					}
				}
				this.$api.get_list({
					name:this.tab[current].name,
					page:this.load[current].page,
					pageSize:this.pageSize
				}).then(res => {
					console.log(res);
					const {data} = res
					if(data.length == 0) {
						let oldLoad = {}
						oldLoad.loading = 'noMore'
						oldLoad.page = this.load[current].page
						this.$set(this.load,current,oldLoad)
						//强制渲染页面
						this.$forceUpdate()
						return
					}
					console.log('请求数据：',data);
					
					
					let oldList = this.listCatchData[current] || []
					oldList.push(...data)
					this.$set(this.listCatchData,current,oldList)
				})
			}
		},
		created() {
			// tab还未赋值
			// this.getList(0)
		},
		watch:{
			tab(newValue) {
				if(newValue.length == 0) {
					return 
				}
				this.getList(this.activeIndex)
			}
		}
	}
</script>

<style lang="scss">
	.home-swiper {
		height: 100%;
		.swiper-item {
			height: 100%;
			overflow: hidden;
			.list-scroll {
				height: 100%;
			}
		}
	}
</style>
